import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
// import './watchStyle.less'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    agentLevel: state.app.agentLevel
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
  }
}

const Step1 = (props) => {
  const {userInfo, close, create, groupName, groupNameChange} = props
  return <div className="modal-wrapper">
    <div className="buy-row first group-modal-content">
      <div className="group-modal-content-row v-center">
        俱乐部头像:
        <img src={userInfo.headUrl} className="group-head-img" alt=""/> 
      </div>
      <div className="group-modal-content-row v-center">
        俱乐部名称: <input type="text" className="group-name-ipt" placeholder="" value={groupName} onChange={groupNameChange}></input>
      </div>      
    </div>
    <div className="bottom-btn">
      <img className="confirm" onClick={close} src="img/mall/dialog/cancel.png?v=20181201" alt=""></img>
      <img className="confirm" onClick={() => {create(groupName)}} src="img/mall/dialog/confirm.png?v=20181201" alt=""></img>
      {/* <img className="full-width" src="img/mall/dialog/confirm.png?v=20181201" alt=""></img> */}
    </div>
  </div>
}

const Step2 = (props) => {
  const {tip, close} = props
  return <div className="modal-wrapper">
    <div className="vh-center group-conent-full">
      <span>{tip}</span>
    </div>
    <div className="bottom-btn">
      <img className="confirm" onClick={close} src="img/mall/dialog/confirm.png?v=20181201" alt=""></img>
      {/* <img className="confirm" onClick={close} src="img/mall/dialog/cancel.png?v=20181201" alt=""></img> */}
      {/* <img className="confirm" onClick={this.query.bind(this)} src="img/mall/dialog/confirm.png?v=20181201" alt=""></img> */}
      {/* <img className="full-width" src="img/mall/dialog/confirm.png?v=20181201" alt=""></img> */}
    </div>
  </div>
}

class CreateGroup extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      groupName: '',
      currentState: '',
      tip: ''
    }
  }
  
  public componentDidMount() {
    if (this.props.hasCreatedGroup) {
      this.setState({currentState: 'result', tip: '你已经创建了一个俱乐部,不能再创建!'})
    } else if (this.props.agentLevel === '普通用户') {
      this.setState({currentState: 'result', tip: '如需创建俱乐部或者了解俱乐部更多信息,请联系客服!'})
    } else {
      this.setState({currentState: 'create'})
    }
  }

  createGroup(crowdName) {
    console.log('crowdName', crowdName);
    const url = `${config.pre}/crowd/info/${Cookies.get('areaCode')}`
    const opt = { 
      method: 'POST', 
      body: JSON.stringify({
        crowdName,
        crowdHead: this.props.userInfo.headUrl
      })
    }
    console.log(opt);
    fetchJson(url, opt).then(data => {
      console.log(data)
      this.setState({tip: data.message, currentState: 'result'})
      this.props.queryGroupInfo()
    })
  }

  groupNameChange(e) {
    this.setState({groupName: _.trim(e.target.value)})
  }

  public render() {
    const {close, userInfo} = this.props
    const {groupName, tip, currentState} = this.state
    return <div className="dialog-block has-mask full" >
      <div className="group-content content">
        <div className="full-width title-wrapper group">
          <img className="title big" src="img/groupNew/create-group-text.png?v=20181201" alt=""/>
          <img onClick={close} className="close" src="img/mall/dialog/close.png?v=20181201" alt=""/>
        </div>
        {
          (() => {
            switch (currentState) {
              case 'create': return <Step1 userInfo={userInfo} close={close} groupName={groupName} groupNameChange={this.groupNameChange.bind(this)} create={this.createGroup.bind(this)}></Step1>
              case 'result':  return <Step2 close={close} tip={tip}></Step2>
              default:      return null
            }
          })()
        }
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(CreateGroup)